<template>
  <div class="w-full h-full flex">
    <div
      class="p-2 <sm:w-full <sm:h-30 <sm:overflow-x-auto <sm:overflow-y-hidden <sm:whitespace-nowrap bg-light-100/500 select-none scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-gray-100 scrollbar-thumb-rounded-md rounded-md w-35 h-full -enter-x"
      sm="w-38 p-3"
      md="w-44 p-4"
      lg="w-48"
      xl="w-52"
    >
      <template v-for="item in dragList" :key="item.cate_title">
        <template v-for="res in item.cate_data" :key="res.title">
          <div
            v-for="res1 in res.list"
            :key="res1.title"
            class="<sm:w-24 <sm:h-full <sm:mr-2 <sm:inline-block border border--light-400/500 rounded-md p-2 cursor-move"
            sm="p-2  mb-2"
            md="p-3"
            hover="cursor-move transform scale-105 filter"
          >
            <img
              class="w-full h-full object-cover item"
              :src="res1.imgUrl"
              alt=""
            />
          </div>
        </template>
      </template>
    </div>
    <div id="detail"></div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'DragPage',
};
</script>

<script setup lang="ts">
import useKeepScroll from '@/hooks/useKeepScroll';
import axios from 'axios';

useKeepScroll();

interface DragModel {
  cate_title: string;
  cate_data: Array<{
    title: string;
    list: any[];
  }>;
}

const dragList = ref<DragModel[]>([]);
const params = reactive({
  page: 1,
  per: 1,
});
axios({
  url: '/mock-api/category/list',
  method: 'get',
  params,
}).then((result) => {
  if (result.data.code == 200) {
    dragList.value = result.data.data;
  }
});

const dragSidebarItem = ref(null);
console.log('dragSidebarItem', dragSidebarItem);
</script>

<style scoped></style>
